<template>
  <div class="login-container">
    <div class="login-layout">
      <div class="right_con">
        <div class="login-box">
          <div class="phone_form_box">
            <div class="title">账号登录</div>
            <el-form
              ref="dataForm"
              :rules="dataRule"
              :model="dataForm"
              class="login-form"
              auto-complete="on"
              label-position="left"
              @keyup.enter.native="handleLogin()"
            >
              <el-form-item prop="userName">
                <span class="svg-container">
                  <svg-icon icon-class="user" />
                </span>
                <el-input
                  ref="username"
                  v-model="dataForm.userName"
                  placeholder="请输入用户名"
                  name="userid"
                  type="text"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
              <el-form-item prop="password">
                <span class="svg-container">
                  <svg-icon icon-class="password" />
                </span>
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="dataForm.password"
                  :type="passwordType"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  auto-complete="off"
                  @keyup.enter.native="handleLogin"
                />
                <span class="show-pwd" @click="showPwd">
                  <svg-icon
                    :icon-class="
                      passwordType === 'password' ? 'eye' : 'eye-open'
                    "
                  />
                </span>
              </el-form-item>
              <el-form-item prop="code" style="display: flex">
                <div style="display: flex; flex: 1">
                  <span class="svg-container">
                    <svg-icon icon-class="password" />
                  </span>
                  <el-input v-model="dataForm.code" placeholder="验证码" />
                  <img :src="captchaPath" alt @click="getCaptcha()">
                </div>
              </el-form-item>
              <el-button
                class="login-btn"
                :loading="loading"
                type="primary"
                @click.native.prevent="handleLogin"
              >
                登录</el-button>
            </el-form>
            <div class="btm_line">
              <span>2021中日韩产业博览会主办方服务平台</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import aes from '@/utils/aes'
import { getCaptcha } from '@/api/school'
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      dataForm: {
        // userName: 'su',
        // password: 'shanzhu@2021',
        userName: '',
        password: '',
        code: '',
        key: ''
      },
      dataRule: {
        userName: [
          {
            required: true,
            message: '会员名/邮箱/手机号不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      captchaPath: '',
      submitLoading: false
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    // 获取验证码
    getCaptcha() {
      getCaptcha().then((response) => {
        if (response && response.code === 1) {
          this.captchaPath = response.data.imageData
          this.dataForm.key = response.data.key
        }
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.loading = true
      const data = {
        username: this.dataForm.userName,
        password: aes.encrypt(this.dataForm.password),
        code: this.dataForm.code,
        key: this.dataForm.key
      }
      this.$store
        .dispatch('user/login', data)
        .then(() => {
          this.$router.push({
            path: this.redirect || '/'
          })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #606266;
$cursor: #606266;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 40px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 10px 5px 10px 15px;
      color: $light_gray;
      height: 40px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item__error {
    color: #fe3351;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .el-form-item {
    border: 1px solid #dcdfe6;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    outline: 0;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-layout {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: url('~@/assets/img/img_login.png') center;
  background-size: cover;

  .right_con {
    min-width: 635px;
    height: 50%;
    position: relative;
    overflow: hidden;

    .login-box {
      background: #fff;
      width: 444px;
      height: 496px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: all 1s;

      .phone_form_box {
        width: 100%;
        height: 100%;
        padding: 60px 32px 0;

        .svg-container {
          padding-left: 15px;
        }

        .title {
          color: #2b2c33;
          font-weight: 500;
          font-size: 24px;
          margin-bottom: 30px;
        }

        .form_tips {
          margin-top: 8px;
          font-size: 12px;
          color: #818599;
          margin-bottom: 20px;
        }

        .btm_line {
          width: 100%;
          border-bottom: 1px solid #dcdee6;
          margin-top: 60px;

          span {
            width: 230px;
            background: #fff;
            text-align: center;
            line-height: 18px;
            margin: 0 auto -9px;
            display: block;
            font-size: 12px;
            color: #818599;
          }
        }

        .login-btn {
          width: 100%;
          margin-top: 20px;
          margin-bottom: 30px;
          color: #fff;
          background-color: #0e6df6;
          border-color: #0e6df6;
        }
      }
    }
  }
}
</style>
